<!-- 品牌管理 -->
<template>
  <div class="trademark-warp">
    <!-- 添加按钮模块 -->
    <el-button type="primary" @click="addTradmarkInfo"><i class="el-icon-plus">&nbsp;添加</i></el-button>
    <!-- 品牌展示模块 -->
    <el-table :data="records" border style="width: 100%;margin-top: 20px;">
      <el-table-column label="序号" min-width="50px" align="center" type="index" />
      <el-table-column label="品牌名称" min-width="100px" prop="tmName" />
      <el-table-column label="品牌LOGO" min-width="200px">
        <template slot-scope="scope">
          <img :src="scope.row.logoUrl" style="width: 50px;height: 50px;">
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="200px">
        <template slot-scope="scope">
          <el-button type="warning" size="mini" @click="reviseTradmarkInfo(scope.row.id)">修改</el-button>
          <el-button type="danger" size="mini" @click="delTradeMark(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 排序和分页 -->
    <div class="sort-paging">
      <!-- 排序按钮 -->
      <el-button type="info" class="sort" size="mini" @click="tradeSort">排序<i :class="sort?'el-icon-top':'el-icon-bottom'" /></el-button>
      <!-- 分页器模块 -->
      <el-pagination
        :current-page="this.page"
        :total="this.total"
        :page-size="this.limit"
        layout=" prev, pager, next, jumper,->, total "
        background
        style="margin-top: 20px; text-align: center;"
        @current-change="handleSizeChange"
        @prev-click="handlePrev"
        @next-click="handleNext"
      />
    </div>
    <!-- 添加修改对话框弹出模块 -->
    <el-dialog title="添加品牌" :visible.sync="dialogFormVisible" style="font-weight: 600;">
      <el-form ref="ruleForm" :model="this.addTradmark" :rules="rules">
        <el-form-item label="品牌名称" label-width="100px" prop="tmName">
          <el-input v-model="addTradmark.tmName" autocomplete="off" placeholder="请输入品牌名" style="width: 60%;" />
        </el-form-item>
        <el-form-item label="品牌LOGO" label-width="100px" prop="logoUrl">
          <el-upload
            class="avatar-uploader"
            action="dev-api/admin/product/fileUpload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="addTradmark.logoUrl" :src="addTradmark.logoUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible=false">取 消</el-button>
        <el-button type="primary" @click="uploadingTradeMark">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 删除对话框弹出模块 -->
    <el-dialog
      title="删除品牌"
      :visible.sync="delFormVisible"
      width="30%"
    >
      <div class="trademark-del">
        <p>确定删除该品牌吗？</p>
        <div>
          <h3>{{addTradmark.tmName}}</h3>
          <img :src="addTradmark.logoUrl">
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmDel">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
  // import引入的组件需要注入到对象中才能使用
  name: 'Trademark',
  components: {},
  data() {
    // 这里存放数据
    return {
      // 当前页码
      page: 1,
      // 每页显示的条数
      limit: 8,
      // 总条数
      total: 0,
      // 表格数据
      records: [],
      // 对话框是否显示
      dialogFormVisible: false,
      // 删除对话框是否显示
      delFormVisible: false,
      // 品牌展示排序方式
      sort: true,
      // 添加品牌信息
      addTradmark: {
        tmName: '',
        logoUrl: ''
      },
      // 品牌id
      trademarkId: 0,
      // 表单验证规则
      rules: {
        tmName: [
          { required: true, message: '请输入品牌名称', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 3 到 5 个字符', trigger: 'change' }
        ],
        logoUrl: [
          { required: true, message: '请上传LOGO图片', trigger: 'change' }
        ]
      }
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getTradeMarkList()
  },
  beforeCreate() { }, // 生命周期 - 创建之前
  beforeMount() { }, // 生命周期 - 挂载之前
  beforeUpdate() { }, // 生命周期 - 更新之前
  updated() { }, // 生命周期 - 更新之后
  beforeDestroy() { }, // 生命周期 - 销毁之前
  destroyed() { }, // 生命周期 - 销毁完成
  activated() { }, // 如果页面有keep-alive缓存功能，这个函数会触发
  // 方法集合
  methods: {
    // 获取品牌列表
    async getTradeMarkList() {
      try {
        const result = await this.$API.trademark.reqTradeMarkList(this.page, this.limit)
        if (result.code === 200) {
          this.records = result.data.records
          this.total = result.data.total
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 分页器改变页码
    handleSizeChange(val) {
      this.page = val
      this.getTradeMarkList()
    },
    // 点击上一页
    handlePrev() {
      this.page--
      this.getTradeMarkList()
    },
    // 点击下一页
    handleNext() {
      this.page++
      this.getTradeMarkList()
    },
    // 点击添加按钮
    addTradmarkInfo() {
      this.dialogFormVisible = true
      // 先弹出对话框 在执行清空验证信息
      try {
        this.$refs.ruleForm.resetFields()
      } catch (error) {
        // console.log(error) 不执行任何操作
      }
      // 清空数据
      this.addTradmark = {
        tmName: '',
        logoUrl: ''
      }
    },
    // 品牌排序按钮
    tradeSort() {
      this.sort = !this.sort
      // this.page = 5
      // this.getTradeMarkList()
      this.records.reverse()
    },
    // 上传图片相关函数
    handleAvatarSuccess(res, file) {
      this.addTradmark.logoUrl = res.data
    },
    // 图片上传前的钩子函数
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG && !isPNG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      if (isPNG) {
        return isPNG && isLt2M
      }
      return isJPG && isLt2M
    },
    // 点击确定按钮上传或者修改品牌信息
    async uploadingTradeMark() {
      await this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$API.trademark.reqUpTradeMark(this.addTradmark)
            .then(res => {
              if (res.code === 200) {
                // element-ui提示框
                if (this.addTradmark.id) {
                  this.$message.success('修改成功')
                } else {
                  this.$message.success('添加成功')
                }
                this.dialogFormVisible = false
                this.getTradeMarkList()
              }
            }).catch(() => {
              // 因为这个模块在请求拦截器哪声明了弹窗 所以这里不需要了
              // 使用空回调函数避免
              // this.$message.error('添加失败')
            })
        } else {
          // console.log(valid, 1)
          return false
        }
      })
    },
    // 修改品牌信息
    async reviseTradmarkInfo(id) {
      this.dialogFormVisible = true
      const result = await this.$API.trademark.reqTradeMarkInfo(id)
      if (result.code === 200) {
        this.addTradmark.tmName = result.data.tmName
        this.addTradmark.logoUrl = result.data.logoUrl
        this.trademarkId = result.data.id
        this.addTradmark.id = this.trademarkId
      }
    },
    // 点击删除按钮操作品牌信息
    async delTradeMark(id) {
      // 获取品牌信息
      const result = await this.$API.trademark.reqTradeMarkInfo(id)
      if (result.code === 200) {
        this.addTradmark.tmName = result.data.tmName
        this.addTradmark.logoUrl = result.data.logoUrl
        this.addTradmark.id = result.data.id
      }
      this.delFormVisible = true
    },
    // 确认删除按钮
    async confirmDel() {
      try {
        const result = await this.$API.trademark.reqRemoveTradeMark(this.addTradmark.id)
        if (result.code === 200) {
          this.$message.success('删除成功')
          this.delFormVisible = false
          this.getTradeMarkList()
        }
      } catch (error) {
        this.$message.error('无法删除', error)
      }
    }
  }
}
</script>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .sort-paging{
    position: relative;
  }
  .sort{
    position: absolute;
    top: -5px;
  }
  .trademark-del{
    display: flex;
    position: relative;
    justify-content:center;
  }
  .trademark-del p{
    width: 170px;
  }
  .trademark-del div{
    position: absolute;
    display: flex;
    justify-content:row;
    width: 170px;
    height: 50px;
    margin: 20px 0;
    top: 20px;
  }
  .trademark-del div img{
    margin-left: 20px;
    width: 50px;
    height: 50px;
  }
</style>
